<template>
    <div class="header__right">
        <div  class="header__languages">
          <span  class="text-button no-select"></span>
          <a-tooltip placement="bottom" >
                <template slot="title">
                    <span>地图上显示中文</span>
                </template>
                <span :class="['text-button','no-select',$store.state.MengWen==false?'text-button--primary':'']" @click="changeLan(false)">中文</span>
            </a-tooltip>
          
          <span >|</span>
           <a-tooltip placement="bottom" >
                <template slot="title">
                    <span>地图上显示蒙文</span>
                </template>
                <span :class="['text-button','no-select',$store.state.MengWen?'text-button--primary':'']" @click="changeLan(true)">蒙文</span>
            </a-tooltip>
        </div>
        <div id="app-right-top" >
            <div id="user-center"  style="visibility: visible;">
                    <div class="avatar-abstract" @click="show_hide_info"></div>
                    <el-collapse-transition>
                        <div :class="['info-box','clearfix',showinfo?'show':'']" v-show="showinfo">
                            <div class="arrow"></div>
                            <div class="detail-info-box">
                                <div class="up-zone">
                                    <div class="not-login-wrapper" v-show="!logined" >
                                        <div class="guide-figure"></div>
                                        <a class="guide-login need-login" @click="login">登录</a>
                                    </div>
                                    <div class="login-wrapper" v-show="logined">
                                        <div class="left avatar"></div>
                                        <div class="right user-info">
                                            <!-- 136******63 -->
                                            <div class="username text-overflow">{{user.name}}</div>
                                            <div class="associate-tip"> 您暂未关联手机，在账号设置中可自动关联 </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bottom-split" v-show="logined">
                                    <ul class="list">
                                        <li>
                                            <a  href="javascript:;" target="_blank" class="need-login">
                                                <i class="icon setting"></i>
                                                <span class="color-strong">账号设置</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="exit" v-show="logined">
                                    <a data-name="quit" href="javascript:;" class="logout color-weak" @click="loginout">退出账号</a>
                                </div>
                            </div>
                        </div>
                    </el-collapse-transition>
                </div>
        </div>
        <el-collapse-transition>
           <div  class="el-dialog__wrapper app-login" style="z-index: 2003;" v-show="showlogindiv">
                    <div role="dialog" class="el-dialog" style="margin-top: 15vh; width: 330px;" >
                        <div id="container" style="background:#d9ddde">
                            <div id="login" class="width-vertical login-label-text login-view-password aliyun">
                                <div class="corner-icon-view view-type-qrcode">
                                    <div class="master-login-title">密码登录</div>
                                    <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeLogin">
                                        <i class="el-dialog__close el-icon el-icon-close"></i> 
                                    </button>
                                </div>
                                <div class="login-content nc-outer-box">
                                    <div class="login-password">
                                        <div id="login-error" class="login-error" v-show="loginerror.length > 0">
                                            <i class="el-icon-warning icon-warning"></i>
                                            <div class="login-error-msg">{{loginerror}}</div>
                                        </div>
                                        <div id="login-form" class="login-form">
                                            <div class="fm-field"><label class="fm-label"><span><label>登录名</label></span></label>
                                                <div class="input-plain-wrap input-wrap-loginid ">
                                                    <input 
                                                    v-model="loginuser.name" 
                                                    type="text" 
                                                    class="fm-text" 
                                                    id="fm-login-id" 
                                                    tabindex="1"  
                                                    placeholder="邮箱/会员名/8位ID" 
                                                    autocapitalize="off"
                                                    @focus='focusinput'></div>
                                            </div>
                                            <div class="fm-field">
                                                <label class="fm-label"><span><label>登录密码</label></span></label>
                                                <div class="input-plain-wrap input-wrap-password">
                                                    <input 
                                                        v-model="loginuser.password" 
                                                        type="password" 
                                                        class="fm-text" 
                                                        id="fm-login-password" 
                                                        tabindex="2"  
                                                        placeholder="请输入登录密码"
                                                        maxlength="40" 
                                                        autocomplete="off" 
                                                        autocapitalize="off"
                                                        @focus='focusinput'
                                                        @keyup.enter="trueLogin"
                                                        >
                                                </div>
                                            </div>
                                            
                                            <div class="fm-btn">
                                                <button  tabindex="3" class="fm-button fm-submit password-login" @click="trueLogin">登录</button>
                                            </div>
                                            <div class="login-blocks login-links">
                                                <a href="javascript:;"
                                                    target="_blank" class="">忘记密码</a>
                                                <a href="javascript:;"
                                                    target="_blank" class="">忘记会员名</a>
                                                <a href="javascript:;"
                                                    target="_blank" class="">免费注册</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <!--  -->
            <!-- </div> -->
        </el-collapse-transition>
    </div>
</template>
<script>
    import Bus from '../../src/bus.js';
    import $ from 'jquery';
    export default {
        data() {
            return {
                apprightop:true,
                showinfo:false,
                logined:false,
                showlogindiv:false,
                user:{},
                loginerror:'',//登录错误信息提示
                loginuser:{
                    name:'',
                    password:'',

                },
            }
        },
        mounted() {
            Bus.$on('ckeckLogin', (cb) => { //外面调用登录状态时
                this.ckeckLogin();
            })
        },
        methods: {
            show_hide_info(){
                this.showinfo=!this.showinfo
            },
            login(){
                this.showinfo=false
                this.showlogindiv=true
            },
            loginout(){
                this.write_user('')
                .then(()=>{
                    this.ckeckLogin();
                    this.showinfo=false
                    if(this.$route.meta && this.$route.meta.requireAuth==true){
                         this.$router.push({
                            path: "/home",
                        })
                    }
                })
            },
            ckeckLogin(){
                let user=''
                this.read_user()
                .then(value=>{
                    if(value){
                        return this.check_logined_ajax(value);
                    }
                    else{
                        return Promise.resolve(false)
                    }
                    
                })
                .then(value=>{
                    if(value){
                        this.logined=true;
                        this.user=value;
                        //

                    }
                    else{
                        this.logined=false;
                        this.user={}
                    }
                    Bus.$emit('login_change',this.logined);
                    this.setuser()
                })
            },
            getavatar(item) {
                if (item && item.avatar) {
                    return `https://nmgwxyy.cn/alatan/static/image_source/xzqh/${item.avatar}`;
                } else {
                    return `https://nmgwxyy.cn/alatan/static/image_source/xzqh/avatar-not-login.png`;
                }
            },
            closeLogin(){
                this.showlogindiv=false
            },
            focusinput(){
                this.loginerror=''
            },
            trueLogin(){
                $.ajax({
                    type: "post",
                    url: window.Glod.ajax+'xzqh/login',
                    data:{
                        name:this.loginuser.name,
                        password:CryptoJS.SHA256(this.loginuser.password).toString()
                    },
                    dataType: "json",
                    async: true,
                    success: (data,textStatus,xhr) => {
                        if(data.status && data.result.Authorization){
                            this.closeLogin();
                            this.write_user(data.result.Authorization)
                            this.ckeckLogin();
                            this.closeLogin();
                            this.loginuser={
                                name:'',
                                password:'',
                            }
                        }
                        else {
                            let Authorization=xhr.getResponseHeader('Authorization')
                            if(Authorization){
                                this.write_user(Authorization)
                            }
                        }
                    },
                    error: data => {
                    },
                });
            },
            setuser() {
                let userimg=this.getavatar(this.user)
                $("#app-right-top .login-wrapper .left.avatar").css("background-image",`url('${userimg}')`) 
                $("#app-right-top .avatar-abstract").css("background-image",`url('${userimg}')`)
            },
            changeLan(_MengWen){
                this.$store.state.MengWen=_MengWen
                Bus.$emit('update_lang');
            },
        }
    }
</script>
<style>
.text-button {
    margin-left: 6px;
    padding: 0;
    border: 0;
    height: auto;
    font-size: 12px;
    border: none;
}
.text-button:first-child {
    margin-left: 0;
}
.header__languages .text-button{
    font-size: 1.0rem;
}
.text-button--primary {
    color: #1890ff;
}
.text-button:hover{
    cursor: pointer;
}

</style>
